<template>
    <div>
        <div class='banner'
        @click="handleBannerClick">
            <img class='banner-img' 
            :src='bannerImg' />
        <div class='banner-info'>
            <div class='banner-tittle'>
                {{this.sighName}}
            </div>
            <div class='banner-number'>
                <span class="iconfont arrow-icon banner-icon">&#xe608;</span>
                {{this.bannerImgs.length}}
            </div>
        </div>
        </div>
        <common-gallary 
            :imgs='bannerImgs' 
            v-show='showGallary'
            @close='handleGallaryClose'
        ></common-gallary>
    </div>
</template>

<script>
import CommonGallary from 'common/gallary/Gallary'
export default {
    name:'DetailBanner',
    props: {
        sighName: String,
        bannerImg: String,
        bannerImgs: Array
    },
    data () {
        return {
            showGallary: 0,
        }
    },
    methods: {
        handleBannerClick () {
            this.showGallary = 1
        },
        handleGallaryClose () {
            this.showGallary = 0
        }
    },
    components: {
        CommonGallary
    }
}
</script>

<style lang="stylus" scoped>
    .banner
        position: relative
        overflow: hidden
        height: 0
        padding-bottom: 55%
        .banner img 
            width : 100%
        .baneer-info
            display: flex
            position: absolute
            left: 0
            right: 0
            bottom: 0
            line-height: .6rem
            color: black
            background-image: linnear-gradient(top, rgba(0, 0, 0, 0),rbga(0, 0, 0, 0.8))
            .baneer-tittle
                flex: 1
                font-size: .32rem
                padding: 0 .2rem
            .baneer-number
                height: .4rem
                line-height: .32rem
                margin-top: .14rem
                padding: 0 .4rem
                border-radius: .2rem
                background: rgba(0, 0, 0, .8)
                font-size: .24rem
                .baneer-icon
                 font-size: .24rem
</style>
